import * as React from 'react'
import api from '@/api'
import { Button, Modal } from 'antd'
import BaseTable from '@/pages/templates/base-table'
import FreightAdd from './add'
import FreightDetail from './detail'
import './styles.less'

const statusOptions = [
  { value: '1', status: '未确认' },
  { value: '2', status: '已确认' },
  { value: '3', status: '已入库' },
  { value: '4', status: '异常' },
  { value: '5', status: '已签收' },
  { value: '6', status: '已完成' },
  { value: '7', status: '已终止' }
]
class Freight extends BaseTable {
  state = {
    ...this.state,
    modalAdd: false,
    modalDetail: false,
    // currentEditData: {}
    serviceChannelOptions: []
  }
  apiList = api.freight.list
  data = {
    searchParams: {
      searchParam: '',
      customerId: '',
      status: '',
      paymentType: '',
      serviceChannel: '',
      orderDateStart: '',
      orderDateEnd: ''
    }
  }
  searchColumns = [
    { title: '客户代码', type: 'text', key: 'customerId' },
    {
      title: '状态',
      type: 'select',
      key: 'status',
      options: statusOptions
    },
    {
      title: '付款类型',
      type: 'select',
      key: 'paymentType',
      options: [
        { value: '1', paymentType: '预付' },
        { value: '2', paymentType: '到付' }
      ]
    },
    {
      title: '服务渠道',
      type: 'select',
      key: 'serviceChannel',
      options: this.state.serviceChannelOptions
    },
    {
      title: '订单日期',
      type: 'date',
      key: 'OrderDate'
    }
  ]
  // 序号 打包号 运单号 货运公司 付款类型 服务类型 状态 打包时间 操作
  tableColumns = [
    {
      key: 'no',
      title: '序号',
      render: (data, context, index) => {
        return (this.state.curPage - 1) * 10 + index + 1
      }
    },
    { dataIndex: 'package_id', title: '打包号' },
    { dataIndex: 'freight_id', title: '运单号' },
    { dataIndex: 'freight_company', title: '客户公司' },
    { dataIndex: 'payment_type', title: '付款类型' },
    { dataIndex: 'service_channel', title: '服务渠道' },
    { dataIndex: 'status', title: '状态' },
    { dataIndex: 'create_time', title: '订单时间' },
    {
      key: 'operate',
      title: '操作',
      render: (text, record, index) => {
        return (
          <span>
            <Button
              type="primary"
              onClick={() => this.handleDetailButton(record)}
            >
              详情
            </Button>
          </span>
        )
      }
    }
  ]

  handleAddOnSuccess() {
    this.setState({
      modalAdd: false
    })
    this.fetchData()
  }
  handleAddOnCancel() {
    this.setState({
      modalAdd: false
    })
  }
  handleDetailButton(data) {
    this.setState({
      modalDetail: true,
      detailId: data.package_id
    })
  }
  handleDetailOnSuccess() {
    this.setState({
      modalDetail: false
    })
    this.fetchData()
  }
  handleDetailOnClose() {
    this.setState({
      modalDetail: false
    })
  }
  renderOthers() {
    return (
      <div style={{ textAlign: 'right' }}>
        <Button
          type="primary"
          onClick={() => {
            this.setState({
              modalAdd: true
            })
          }}
        >
          打包
        </Button>
      </div>
    )
  }
  renderModals() {
    return (
      <div>
        <Modal
          visible={this.state.modalAdd}
          width={1100}
          footer={null}
          title="新增货运单"
          maskClosable={false}
          onCancel={this.handleAddOnCancel.bind(this)}
        >
          <FreightAdd
            onSuccess={this.handleAddOnSuccess.bind(this)}
            onClose={this.handleAddOnCancel.bind(this)}
          />
        </Modal>
        <Modal
          visible={this.state.modalDetail}
          width={1100}
          footer={null}
          title="货运单详情"
          maskClosable={false}
          onCancel={this.handleDetailOnClose.bind(this)}
        >
          <FreightDetail
            // wrappedComponentRef={form => (this.editForm = form)}
            id={this.state.detailId}
            onSuccess={this.handleDetailOnSuccess.bind(this)}
            onClose={this.handleDetailOnClose.bind(this)}
          />
        </Modal>
      </div>
    )
  }
}
export default Freight
